<template>
    <div>
      <el-form ref="ruleForm" :model="form"  label-width="100px">
  
        <el-row>
          <el-col :span="6" :offset="1">
            <el-form-item label="会员名" prop="username">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password_hash">
              <el-input v-model="form.password_hash"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
              <el-input v-model="form.mobile"></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱" prop="email">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="用户地址" prop="address">
              <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="用户积分" prop="points">
                <el-input-number v-model="form.points" @change="handleChange" :min="1" label="用户积分"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
  
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="submit(ruleForm)">立即保存</el-button>
        <el-button @click="$emit('changes', false)">取 消</el-button>
      </div>
     
      
  
    </div>
  </template>
<script>
export default {
    data () {
      return {
        form:{
          user_id:0,
          username:"张三",
          password_hash:"123",
          mobile:"19958123786",
          email:"zhansan@qq.com",
          address:"湖南长沙",
          points:0, //积分
          membership_level:0, //等级
          create_time:(new Date().toISOString()).substring(0, 10),
          last_login_time:(new Date().toISOString()).substring(0, 10),
          is_delete:0
        }
      }
    }, model: {
    prop: "dialogFormVisible",
    event: "changes",
  },methods: {
    submit(){
      this.axios({
        method:"post",
        url:"user_info",
        data:this.form,
      }).then(res => {  
                if (res.data.code>0) {  
                  this.$message({
                  message: "添加成功",
                  type: "success",
                  showClose: true,
                  duration: 3000,
                });
                   
                     //刷新主页面数据
                this.$emit("refresh");
                //关闭弹窗
                this.$emit("changes", false);  
                } else {  
                  this.$message({
                  message: "添加失败",
                  type: "error",
                  showClose: true,
                  duration: 3000,
                });
                }  
            }).catch(err => {  
                console.error("请求失败:" + err);  
                
            });  
    }
  }, handleChange(value) {
            // 积分变化时的处理逻辑，可根据需求添加
            if (value >= 0 && value <= 50) {
                this.form.membership_level = 0;
            } else if (value > 50 && value <= 100) {
                this.form.membership_level = 1;
            } else if (value > 100 && value <= 150) {
                this.form.membership_level = 2;
            }
           alert('积分变化为：', value);
        }
}
</script>

<style scoped>
.user-form-container {
  padding: 20px;
}

.user-form-card {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 20px;
}

.dialog-footer {
  margin-top: 20px;
}
</style>